iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
Modern Web

React 學得動嗎系列 第 5

[Day 5] 聊聊React Hooks

  • 分享至 

  • xImage
  •  

歡迎來到我們React學習之旅的第五天!今天,我們來聊聊React的一個核心特性: Hooks。

什麼是useEffect?

useEffect是React提供的一個Hook,用於在函數組件中執行副作用操作。副作用可以是任何會影響組件外部的操作,比如:

  • 資料獲取
  • 訂閱設置
  • 手動修改DOM
  • 記錄日誌

useEffect的基本語法

useEffect(() => {
  // 執行副作用
  return () => {
    // 清理函數 (可選)
  }
}, [dependencies]);
  • 第一個參數是一個函數,包含要執行的副作用程式。
  • 第二個參數是一個可選的依賴list,決定了effect何時重新執行。

useEffect的實際應用

讓我們通過一個實例來看看如何使用useEffect。我們將擴展我們的計數器組件,添加一個自動計數功能和一個標題更新功能。

import React, { useState, useEffect } from 'react';
import { Button } from "@/components/ui/button"

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);
  const [isAutoCount, setIsAutoCount] = useState(false);

  // 自動計數效果
  useEffect(() => {
    let intervalId: number | undefined;
    if (isAutoCount) {
      intervalId = setInterval(() => {
        setCount((prevCount) => prevCount + 1);
      }, 1000);
    }
    // 清理函數
    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [isAutoCount]);

  // 更新頁面標題
  useEffect(() => {
    document.title = `當前計數: ${count}`;
  }, [count]);

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">計數器</h2>
      <p className="text-xl mb-4">當前計數: {count}</p>
      <div className="space-x-2 mb-4">
        <Button onClick={() => setCount(count + 1)}>增加</Button>
        <Button variant="outline" onClick={() => setCount(count - 1)}>減少</Button>
      </div>
      <Button 
        variant={isAutoCount ? "destructive" : "secondary"}
        onClick={() => setIsAutoCount(!isAutoCount)}
      >
        {isAutoCount ? '停止自動計數' : '開始自動計數'}
      </Button>
    </div>
  );
};

export default Counter;

https://ithelp.ithome.com.tw/upload/images/20240919/20140358lluIL3DcCO.png

在這個更新後的組件中,我們使用了兩個useEffect Hook:

  1. 自動計數效果: 這個effect依賴於isAutoCount狀態。當isAutoCount為true時,它會每秒自動增加計數。注意我們如何在effect的清理函數中清除interval,這是很重要的,可以防止記憶體洩漏。

  2. 更新頁面標題: 這個effect依賴於count狀態。每當count改變時,它就會更新頁面的標題。

useEffect的依賴list

useEffect的依賴list是一個非常重要的概念:

  • 如果依賴list為空 [],effect只會在組件掛載和卸載時執行。
  • 如果沒有提供依賖list,effect會在每次渲染後執行。
  • 如果提供了依賴list,effect只會在依賴項改變時執行。

上一篇
[Day 4] 改用用Vite來建立React專案
下一篇
[Day 6] React狀態提升:優化組件間的資料流動
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言